<template>
  <div class="lr-input lr-input--suffix" :class="{'':clearable || showPassword}">
  <!-- 这里用了两个判断，先判断:type="showPassword ? xxx :type" 再判断ifshowPassword ? 'password' : 'text' -->
    <!-- 业务逻辑是先看有没有type传过来，如果有就再判断ifshowPassword是false还是true，如果是默认false就
    返回password为showPassword的值，不展示 密码，如果点击过后变成true，就返回text，成文本显示 -->
      <input 
      :type="showPassword ? (ifshowPassword ? 'text':'password') :type" 
      :name="name" :disabled="disabled" :placeholder="placeholder"
      :value="value" @input="changevalue"
      :class="['lr-input__inner',{'is-disabled':disabled}]">
      <span class="lr-input__suffix">
        <i :class="{'hm-input__icon hm-icon-circle-close ':clearable && value}" @click="clearvalue"></i>
        <i :class="[{'hm-input__icon hm-icon-view':showPassword},{'lr-icon-view-active':ifshowPassword}]"
         @click="changeshowPassword" ></i>
      </span>
      </input>
  </div>
</template>

<script>
export default {
    name:'LrInput',
    props:{
        type:{
            type:String,
            defalut:'text'
        },
        name:{
            type:String,
            defalut:''
        },
        placeholder:{
            type:String,
            defalut:''
        },
        disabled:{
            type:Boolean,
            defalut:'false'
        },
        //value是父组件input的v-modle绑定的值
        value:{
            type:String,
            defalut:''
        },
        clearable:{
            type:Boolean,
            defalut:'false'
        },
        showPassword:{
            type:Boolean,
            defalut:'false'
        }
    },
    data() {
      return {
        ifshowPassword:false
      }
    },
    methods: {
        changevalue(e){
            // console.log(e.target.value);
            this.$emit('input',e.target.value)
        },
        clearvalue(){
            this.$emit('input','')
        },
        changeshowPassword(){
          this.ifshowPassword = !this.ifshowPassword
        }
    },
}
</script>

<style lang="scss" scope>
.lr-input {
  width: 100%;
  position: relative;
  font-size: 14px;
  display: inline-block;
  .lr-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;

    &:focus {
      outline: none;
      border-color: #409eff;
    }
    &.is-disabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
}

.lr-input--suffix {
  .lr-input__inner {
    padding-right: 30px;
  }
  .lr-input__suffix {
    position: absolute;
    height: 100%;
    right: 10px;
    top: 0;
    line-height: 40px;
    text-align: center;
    color: #c0c4cc;
    transition: all .3s;
    z-index: 900;
    i {
      color: #c0c4cc;
      font-size: 14px;
      cursor: pointer;
      transition: color .2s cubic-bezier(.645,.045,.355,1);
    }
    .lr-icon-view-active {
      color: blue;
    }
  }

}
</style>